
<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交发布"/>
    </el-steps>
    
    <el-form label-width="120px">
    <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
    </el-form-item>
    <!-- 所属分类 TODO -->
    <!-- 所属分类：级联下拉列表 -->
    <!-- 一级分类 -->
    <el-form-item label="课程类别">
      <!-- 点击事件 得到二级分类列表 -->
    <el-select @change="subjectLevelOneChanged"
        v-model="courseInfo.subjectParentId"
        placeholder="请选择一级分类">
        <el-option
        v-for="subject in subjectOneList"
        :key="subject.id"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>
    <!-- 二级分类 -->
    <el-select v-model="courseInfo.subjectId" placeholder="请选择二级分类">
      <el-option
        v-for="subject in subSubjectList"
        :key="subject.value"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>


    </el-form-item>
    <!-- 课程讲师 TODO -->
    <el-form-item label="课程讲师">
    <el-select
        v-model="courseInfo.teacherId"
        placeholder="请选择">
        <el-option
        v-for="teacher in teacherList"
        :key="teacher.id"
        :label="teacher.name"
        :value="teacher.id"/>
        <!-- 提交的是value -->
    </el-select>
    </el-form-item>

    <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
    </el-form-item>
    <!-- 课程简介 TODO -->
   <!-- 课程简介         使用富文本编辑器--> 
    <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
    </el-form-item>
    <!-- 课程封面 TODO -->
    <!-- 课程封面-->
    <el-form-item label="课程封面">
      <el-upload
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :action="BASE_API+'/eduoss/fileoss/upload'"
        class="avatar-uploader">
        <img :src="courseInfo.cover" width="300px">
      </el-upload>
    </el-form-item>


    <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
    </el-form-item>
    <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="addOrUpdate">保存并下一步</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'   //引入组件

export default {
  components: { Tinymce },     //声明富文本编辑器组件
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseInfo:{
        title: '',
        subjectId: '',
        subjectParentId:'',
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '/static/coverdemo/backg2.jpg',//默认封面
        price: 0
      },
      courseId:'',
      
      BASE_API: process.env.BASE_API, // 接口API地址
      teacherList:[],     //讲师列表
      subjectOneList: [],//一级分类列表
      subSubjectList: []//二级分类列表
    }
  },
  created() {
    //得到url中的参数  用于下一步到这一步的数据回显
     if (this.$route.params && this.$route.params.id) {
        this.courseId= this.$route.params.id
        //根据id获取课程基本信息用于回显
        this.getInfo()
    }else{
       //初始化所有 讲师
        this.getTeacherLists()
        //初始化一级分类
        this.initSubjectList()
    } 


   
  },
  methods: {
    //用于下一步返回到这一步的数据回显
        getInfo() {
          console.log(this.courseId)
          //通过课程id获得课程信息  将课程信息赋值给课程对象courseInfo
          course.getCourseInfoById(this.courseId).then(response => {
            this.courseInfo = response.data.item

            //下拉列表的数据回显   下拉列表的问题  因为二级列表对象subSubjectList只有onchange的时候才会有值 现在要循环给他赋值
            // 初始化分类列表    通过getSubjectList得到课程列表  赋值给一级列表集合 因为在courseInfo中有一级列表id 复制后就会显示
              subject.getSubjectList().then(response => {
                
                this.subjectOneList = response.data.list
                for (let i = 0; i < this.subjectOneList.length; i++) {
                  //循环一级标题 得到所有二级标题 判断所有二级标题的父id 相等的话 就赋值给二级标题集合
                  if (this.subjectOneList[i].id === this.courseInfo.subjectParentId) {
                    this.subSubjectList = this.subjectOneList[i].children
                  }
                }
              })
            // 初始化所有 讲师
            this.getTeacherLists()


          }).catch((response) => {
            this.$message({
              type: 'error',
              message: response.message
            })
          })
        },

      //得到所有的二级分类  在一级分类的children中本来就存在    默认传过来的value就是点击的一级分类value  为id
      subjectLevelOneChanged(value){
          for(let i = 0;i<this.subjectOneList.length;i++){
            if(value === this.subjectOneList[i].id){
              this.subSubjectList = this.subjectOneList[i].children
              //二级分类已经选择的subjectIdid值清空  
              // console.log(this.courseInfo.subjectId)
              this.courseInfo.subjectId = ''
            }
          }
      },
      //上传头像之后的方法
        handleAvatarSuccess(res, file) {
          console.log(res)// 上传响应  res为返回值
          console.log(URL.createObjectURL(file.raw))// base64编码
          this.courseInfo.cover = res.data.url
        },
        //上传头像之前的方法
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'
          const isLt2M = file.size / 1024 / 1024 < 2
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        },
      //查看所有讲师
        getTeacherLists(){
            course.getTeachers()
            .then(response => {
                //赋值
                this.teacherList = response.data.items})
        },
        //得到一级分类列表
        initSubjectList() {
            subject.getSubjectList()
            .then(response => {
                //赋值给下拉框对象
                this.subjectOneList = response.data.list
            })
            },
        next() {
            course.addCourseList(this.courseInfo)
            .then(response => {
                this.$message({
                    type:'success',
                    message:'添加课程信息成功！'
                })
                this.$router.push({ path: '/course/chapter/'+response.data.id })
            })
            //   console.log('next')
              //跳转到第二步
            },
        update(){
             course.updateCourseInfoId(this.courseInfo)
            .then(response => {
                this.$message({
                    type:'success',
                    message:'添加课程修改成功！'
                })
                this.$router.push({ path: '/course/chapter/'+response.data.id })
            })
        }, 
      addOrUpdate(){
            if(!this.courseInfo.id){
              //添加
              console.log("添加")
                this.next()
            }else{
              //修改
              console.log("修改")
              this.update()
            }
        }

  }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>